<template>
  <div class="app-container">

    <section class="form-bar">
      <el-form v-loading="loading" class="detailForm" :model="form" label-width="100px">

        <section>
          <div>
            <h3>当前刊期</h3>
            <el-button v-show="role == '超级管理员' || role == '管理员' " type="primary" style="margin: 10px;" @click="handleAddHistory">新增</el-button>
          </div>
          <el-table
            :data="history"
            border
            highlight-current-row
          >
            <el-table-column align="center" label="内容">
              <template slot-scope="scope"> <span>{{ scope.row.content }}</span></template>
            </el-table-column>
            <el-table-column align="center" label="刊期">
              <template slot-scope="scope"> <span>{{ scope.row.publish_at }} {{ scope.row.publish_at_about_name }}</span></template>
            </el-table-column>
            <el-table-column
              class-name="status-col"
              label="操作"
              width="220"
              align="center"
            >
              <template slot-scope="scope">
                <div v-show="role == '超级管理员' || role == '管理员' ">
                  <el-button size="mini" type="success" @click="handleEditHistory(scope.row)">修改
                  </el-button>
                  <el-button size="mini" type="danger" @click="handleDeleteHistory(scope.row)">删除
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <section class="pagination-bar">
            <el-pagination
              background
              :current-page="historyQuery.page"
              :page-sizes="[100, 50, 30, 10]"
              :page-size="historyQuery.limit"
              layout="sizes, prev, pager, next"
              :total="count"
              @size-change="(limit) => {historyQuery.limit = limit; getHistory()}"
              @current-change="(page) => {historyQuery.page = page; getHistory()}"
            />
          </section>
        </section>

      </el-form>
    </section>

    <el-dialog style="text-align: center;" title="编辑" :visible.sync="updateEditDialogVisible">
      <el-input v-model="editTempData.content" placeholder="请填写内容" style="margin: 10px 0;width: 100%;" />
      <el-date-picker
        v-model="editTempData.publish_at"
        type="month"
        placeholder="选择日期"
        style="margin: 10px 0;width: 100%;"
      />
      <el-select v-if="inEdit" v-model="editTempData.publish_at_about" style="margin: 10px 0;width: 100%;">
        <el-option
          v-for="item in publicationOptions"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-button style="margin: 10px 0;width: 120px;" @click="updateHistory">提交</el-button>
    </el-dialog>
    <el-dialog style="text-align: center;" title="新增" :visible.sync="addEditDialogVisible">
      <el-input v-model="editTempData.content" placeholder="请填写内容" style="margin: 10px 0;width: 100%;" />
      <el-date-picker
        v-model="editTempData.publish_at"
        type="month"
        placeholder="选择日期"
        style="margin: 10px 0;width: 100%;"
      />
      <el-select v-model="editTempData.publish_at_about" style="margin: 10px 0;width: 100%;">
        <el-option
          v-for="item in publicationOptions"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-button style="margin: 10px;width: 120px;" @click="addHistory">提交</el-button>
    </el-dialog>
  </div>
</template>

<script>
import api from '../../api'
// import globalVariable from '@/api/global'
import { getToken } from '../../utils/auth'
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'role'
    ])
  },
  name: 'Detail',
  data() {
    return {
      history: '',
      count: '',
      historyQuery: {
        page: 1,
        limit: 10
      },
      inEdit: false,
      form: {
        title: ''
      },
      fileList: '',
      updateUrl: `${process.env.VUE_APP_BASE_API}/api/management/periodical/updateFile`,
      updateHeader: {
        'Authorization': 'bearer' + getToken()
      },
      edit: '',
      loading: false,
      directionOptions: '',
      cycleOptions: '',
      auditStandardOptions: '',
      levelOptions: '',
      includedDatabaseOptions: '',
      publicationOptions: '',
      updateLetterDialogVisible: false,
      updateCoverDialogVisible: false,
      updateEditDialogVisible: false,
      editTempData: '',
      addEditDialogVisible: false
    }
  },
  created() {
    this.fetchData()
    this.getOptions()
    this.getHistory()
  },
  methods: {
    fetchData() {
      api.periodical.detail(this.$route.query).then(res => {
        if (res.err_no === 0) {
          this.form = res.data
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
      })
    },
    handleEdit() {
      this.edit = JSON.parse(JSON.stringify(this.form))
      this.edit.directions = this.edit.directions.map(i => { return i.id })
      this.edit.included_databases = this.edit.included_databases.map(i => { return i.id })
      this.inEdit = true
    },
    onSubmit() {
      this.loading = true
      api.periodical.updateDetail(this.edit).then(res => {
        this.loading = false
        if (res.err_no === 0) {
          location.reload()
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
      })
    },
    getOptions() {
      this.getDirectionOptions()
      this.getCycleOptions()
      this.getAuditStandardOptions()
      this.getLevelOptions()
      this.getIncludedDatabaseOptions()
      this.getPublicationOptions()
    },
    getDirectionOptions() {
      api.periodical.getDirectionOptions().then(res => {
        if (res.err_no === 0) {
          this.directionOptions = res.data
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
      })
    },
    getCycleOptions() {
      api.periodical.getCycleOptions().then(res => {
        if (res.err_no === 0) {
          this.cycleOptions = res.data
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
      })
    },
    getAuditStandardOptions() {
      api.periodical.getAuditStandardOptions().then(res => {
        if (res.err_no === 0) {
          this.auditStandardOptions = res.data
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
      })
    },
    getLevelOptions() {
      api.periodical.getLevelOptions().then(res => {
        if (res.err_no === 0) {
          this.levelOptions = res.data
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
      })
    },
    getIncludedDatabaseOptions() {
      api.periodical.getIncludedDatabaseOptions().then(res => {
        if (res.err_no === 0) {
          this.includedDatabaseOptions = res.data
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
      })
    },
    getPublicationOptions() {
      api.periodical.getPublicationOptions().then(res => {
        if (res.err_no === 0) {
          this.publicationOptions = res.data
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
      })
    },
    handleUpdateLetter() {
      this.updateLetterDialogVisible = true
    },
    handleUpdateCover() {
      this.updateCoverDialogVisible = true
    },
    handleEditHistory(row) {
      this.updateEditDialogVisible = true
      this.editTempData = row
    },
    updateHistory() {
      api.periodical.updateHistory(this.editTempData).then(res => {
        if (res.err_no === 0) {
          this.updateEditDialogVisible = false
          this.getHistory()
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
      })
    },
    getHistory() {
      api.periodical.getHistory({
        id: this.$route.query.id,
        page: this.historyQuery.page,
        limit: this.historyQuery.limit
      }).then(res => {
        if (res.err_no === 0) {
          this.history = res.data.data
          this.count = res.data.count
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
        this.handleEdit()
      })
    },
    handleDeleteHistory(row) {
      this.$confirm('确定删除该记录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.periodical.deleteHistory({ id: row.id }).then(res => {
          if (res.err_no === 0) {
            this.getHistory()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          } else {
            this.$notify.error({
              title: '错误',
              message: res.err_msg
            })
          }
        })
      })
    },
    handleAddHistory() {
      this.editTempData = {
        content: '',
        id: this.form.id
      }
      this.addEditDialogVisible = true
    },
    addHistory() {
      api.periodical.addHistory(this.editTempData).then(res => {
        if (res.err_no === 0) {
          this.getHistory()
          this.addEditDialogVisible = false
          this.$message({
            type: 'success',
            message: '添加成功!'
          })
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .detailForm {
  .nowrapFlex {
    display: flex;
    flex-wrap: nowrap;
  }

  .el-form-item {
    width: 50%;
    display: inline-block;

  .inputNumber {
    width: 220px;
    margin-right: 20px;
  }
  }

  .allLine {
    width: 100%;
  }
  }
</style>
